<template>
    <nav>
        <img :src="logo"/>
        <span v-for="(item,index) in tabList"
              @click="onTabHandle(index)"
              :class="['tab-item',tabIndex===index?'tab-item-selected':'']">{{ item.name }}</span>
    </nav>
</template>

<script>
import logoImage from "@/assets/logo.png"

export default {
    name: "HeaderTabComponent",
    data() {
        return {
            tabList: [
                {name: "首页", path: "/"},
                {name: "诗·词", path: "/app/p"},
                {name: "文", path: "/app/w"},
                {name: "经", path: "/app/j"},
                {name: "典", path: "/app/d"},
            ],
            tabIndex: 0,
            logo: logoImage
        }
    },
    mounted() {

    },
    methods: {
        onTabHandle(index) {
            this.tabIndex = index;
            this.$router.push(this.tabList[this.tabIndex]['path']);
        }
    }
}
</script>

<style lang="scss" scoped>
nav {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    box-shadow: #ececec 1px 1px 3px 3px;
    padding-left: 15%;
    cursor: pointer;
    z-index: 1000000;
    background-color:  #ffffff;

    img {
        width: 76px;
        height: 44px;
    }

    .tab-item {
        padding: 0 15px 10px;
        border-bottom: 4px solid #ffffff;
        cursor: pointer;
        font-weight: bold;
        margin-right: 10px;

        &:hover {
            color: #803545;
        }
    }

    .tab-item-selected {
        color: #803545;
        border-bottom: 4px solid #803545;
    }

}

</style>
